<template>
	<view class="container">
		<empty v-if="news.length == 0"></empty>
		<view class="news_box" v-for="(item,index) in news" @click="navToDetails(item,index)">
			<view class="news-text">
				<view class="news_title">{{item.title}}</view>
				<view class="news_time">{{item.publishTime}}</view>
			</view>
			<view class="news_img">
				<image :src="item.coverImageUrl || noPhoto" class="news_img"></image>
			</view>
		</view>
		<uni-load-more :status="loadingType" style="height: 60upx;"></uni-load-more>
	</view>
</template>

<script>
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				tagType:"",
				flag:0,
				areaCode:'',
				loadingType: 'more',
				noPhoto: 'https://cdjjyl.com.cn/images/noPhoto.png',
				page: 1,
				news: [],
				communityId: this.$api.util.getAreaCode(),
			}
		},
		components: {
			empty
		},
		onLoad(options) {
			if(options){
				this.tagType = options.tagType
				this.tagName = options.tagName
				console.log(this.tagName)
				this.getArticalList(this.page,this.tagType,this.tagName)
			}
		},
		onReachBottom() {
			if (this.loadingType === 'more') {
				this.page = this.page + 1;
				this.getArticalList(this.page,this.tagType,this.tagName)
			}
		},
		methods: {
			getArticalList(page,tagType,tagName) {
				let params = {
					"areaCode": this.communityId,
					"tagType": tagType,
					"tagName": tagName,
					"page": page,
					"pageSize": "6",
					"isPublished":true
				}
				this.$api.request.getArticalList(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.news = res.body.data.list
					}
					var total = res.body.data.total
					if (this.news.length >= total) {
						this.loadingType = 'noMore'
					}
				})
			},
			navToDetails(item, index) {
				uni.navigateTo({
					url: '/package_isp/pages/unionInfo/details?dataUuid='+ item.pressReleaseUuid
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		/* background-color: #FBFBFB; */
		overflow: hidden;
		padding: 32upx 20upx 32upx 20upx;
	}

	.news_box {
		background: #FFFFFF;
		box-shadow: 2upx 2upx 22upx -2upx rgba(0, 0, 0, 0.1);
		border-radius: 20upx;
		height: 220upx;
		margin-bottom: 16upx;
		padding: 16upx;
		display: flex;
		justify-content: space-between
	}

	.news-text {
		width: 410upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.news_title {
		font-size: 28upx;
		overflow: hidden;
		max-height: 120upx;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.news_time {
		font-size: 24upx;
		color: #999999;
	}

	.news_img {
		width: 252upx;
		height: 188upx;
		border-radius: 8upx;
	}
</style>
